<template>
  <div>
    <h1 v-text="num"></h1>
    <button @click="sub">-1</button>
    <button @click="add">+1</button>

    <hr />

    <input type="text" @keyup.enter="confirm" v-model="task" />

    <div v-for="(item, idx) in list" :key="item.id">
      <span v-text="item.id"></span> --
      <span v-text="item.task"></span>
      <button @click="delTodo(idx)">删除</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const num = ref(0);
const task = ref("");
const list = ref([]);
const add = () => {
  num.value++;
};
const sub = () => {
  num.value--;
};

const confirm = () => {
  if (task.value) {
    list.value.push({
      id: Date.now(),
      task: task.value,
    });
    task.value = "";
  }
};

const delTodo = (idx) => {
  list.value.splice(idx, 1);
};
</script>

<style lang="scss" scoped>
</style>